<template>
  <!-- 滑动消息组件 -->
  <div class="swipe-item-wrapper" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <div class="swipe-item-content"
      :style="{ transform: `translateX(${translateX}px)`, transition: isDragging ? 'none' : 'transform 0.3s' }">
      <!-- 消息内容 -->
      <div class="message-info" @click="handleItemClick">
        <div class="icon-placeholder">
          <span class="unread-dot" v-show="!message.read"></span>
          <!-- <van-icon :dot="!message.read" size="20" color="#47D1B9" name="bell" /> -->
        </div>
        <div class="text-content">
          <div class="title-line">
            <span class="title">{{ message.title }}</span>
            <span class="date">{{ message.date }}</span>
          </div>
          <p class="subtitle">{{ message.subtitle }}</p>
        </div>
      </div>
    </div>
    <!-- 滑动后显示的操作按钮 -->
    <div class="swipe-actions">
      <button class="action-btn read" @click="emit('markRead', message.id)">已读</button>
      <button class="action-btn delete" @click="emit('delete', message.id)">删除</button>
    </div>
  </div>

  <!-- 底部弹出 -->
  <van-popup round v-model:show="showBottom" position="bottom">
    <Notification :message="props.message" @confirm="handleNotificationConfirm" @delete="handleNotificationDelete" />
  </van-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Notification from './Notification.vue';

import type { Message } from '../data';

const props = defineProps<{ message: Message }>();
const emit = defineEmits(['markRead', 'delete', 'swipeStart']);

const startX = ref(0);
const translateX = ref(0);
const isDragging = ref(false);
const showBottom = ref(false);

// 处理消息项点击事件，显示底部弹出层
const handleItemClick = () => {
  showBottom.value = true;
};

const actionsWidth = 140; // '已读'和'删除'按钮的总宽度

const onTouchStart = (e: TouchEvent) => {
  // 当用户开始滑动此项时，通知父组件
  emit('swipeStart', props.message.id);
  // startX.value = e.touches[0].clientX;
  const touch = e.touches[0];
  if (!touch) return;
  startX.value = touch.clientX;
  isDragging.value = true;
};

const onTouchMove = (e: TouchEvent) => {
  if (!isDragging.value) return;
  const touch = e.touches[0];
  if (!touch) return;
  const deltaX = touch.clientX - startX.value;
  // 只允许向左滑动，并且不超过按钮宽度
  translateX.value = Math.min(0, Math.max(-actionsWidth, deltaX + (translateX.value < 0 ? -actionsWidth : 0)));
};

const onTouchEnd = () => {
  isDragging.value = false;
  // 如果滑动超过一半，则完全滑开，否则弹回
  if (Math.abs(translateX.value) > actionsWidth / 2) {
    translateX.value = -actionsWidth;
  } else {
    translateX.value = 0;
  }
};

// 处理Notification组件的确定按钮点击事件（标记为已读）
const handleNotificationConfirm = () => {
  showBottom.value = false;
  emit('markRead', props.message.id);
};

// 处理Notification组件的删除按钮点击事件
const handleNotificationDelete = () => {
  showBottom.value = false;
  emit('delete', props.message.id);
};

// 暴露一个方法给父组件，用于从外部关闭此项
const close = () => {
  translateX.value = 0;
};
defineExpose({ close });
</script>

<style scoped lang="scss">
$actions-width: 140px;

.swipe-item-wrapper {
  position: relative;
  overflow: hidden;
  background-color: white;
}

.swipe-item-content {
  position: relative;
  z-index: 2;
  background-color: white;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.message-info {
  display: flex;
  // align-items: center;
}

.icon-placeholder {
  width: 18px;
  height: 23px;
  margin-right: 10px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('@/assets/messageImg/编组 3@2x.png');

  .unread-dot {
    position: relative;
    right: -18px;
    display:block;
    width: 6px;
    height: 6px;
    background-color: #e74c3c;
    border-radius: 50%;
  }
}

.text-content {
  flex-grow: 1;
}

.title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

.date {
  font-size: 12px;
  color: #999;
}

.subtitle {
  font-size: 13px;
  color: #999999;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  z-index: 1;
  width: $actions-width;
}

.action-btn {
  width: 50%;
  border: none;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.read {
    background-color: #47D0BF;
  margin: 2px 0 2px 1px;
  }

  &.delete {
    background-color: #FF611C;
    margin: 2px 1px 2px 0;
  }
}


.close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}

.popup-body h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
}

.popup-body p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.popup-date {
  color: #999 !important;
  font-size: 12px !important;
  margin-top: 12px;
}
</style>